import React, { Component } from 'react'
import "./Category.scss"
import headBack from "./images/headBack.jpg"
export default class Category extends Component {
    // 跳转搜索中心
    handleSearchCenter =(params) => {
        this.props.history.push("/searchCenter")
    }
    // 跳转列表页
    handleList = (e) => {
        let cid = e.target.getAttribute("data-index")
        this.props.history.push("/GoodsList/"+cid )
        console.log(cid)
    }
    render() {
        return (
            <div className="Category">
                {/* 头部导航开始 */}
                <div className="categoryTop">
                    <img src={headBack} alt="返回" onClick={()=> window.history.go(-1) }/>
                    <p className="title">选酒</p>
                    <p className="lie"></p>
                </div>
                {/* 头部导航结束 */}
                {/* 搜索框开始 */}
                <div className="search">
                    <div className="inp" onClick={this.handleSearchCenter}>
                        <em></em>
                        <p>整箱团购惠 加19.9的双支皮盒</p>
                    </div>
                </div>
                {/* 搜索框结束 */}
                {/* 分类列表开始 */}
                <div className="contentFrame">
                    <ul>
                        <li className="frameOne" onClick={this.handleList} data-index="1" >
                            <i  data-index="1"></i>
                            <span  data-index="1">白酒</span>
                        </li>
                        <li className="frameTwo" onClick={this.handleList} data-index="2">
                            <i data-index="2"></i >
                            <span data-index="2">葡萄酒</span>
                        </li>
                        <li className="frameThere" onClick={this.handleList} data-index="3">
                            <i data-index="3"></i>
                            <span data-index="3">洋酒</span>
                        </li>
                        <li className="frameFour" onClick={this.handleList} data-index="4">
                            <i data-index="4"></i>
                            <span data-index="4">整箱购</span>
                        </li>
                        <li className="frameFive" onClick={this.handleList} data-index="5">
                            <i data-index="5"></i>
                            <span data-index="5">老酒</span>
                        </li>
                        <li className="frameSix" onClick={this.handleList} data-index="1">
                            <i data-index="1"></i>
                            <span data-index="1">清仓特卖</span>
                        </li>
                        <li className="frameSeven" onClick={this.handleList} data-index="2">
                            <i data-index="2"></i>
                            <span data-index="2">海外直购</span>
                        </li>
                        <li className="frameEight" onClick={this.handleList} data-index="3">
                            <i data-index="3"></i>
                            <span data-index="3">精美大坛</span>
                        </li>
                        <li className="frameNine" onClick={this.handleList} data-index="4">
                            <i data-index="4"></i>
                            <span data-index="4">红酒整箱</span>
                        </li>
                        <li className="frameTen" onClick={this.handleList} data-index="5">
                            <i data-index="5"></i>
                            <span data-index="5">值得买</span>
                        </li>
                        <li className="frameEleven" onClick={this.handleList} data-index="1">
                            <i data-index="1"></i>
                            <span data-index="1">销量排行</span>
                        </li>
                        <li className="frameTwelve" onClick={this.handleList} data-index="2">
                            <i data-index="2"></i>
                            <span data-index="2">礼尚往来</span>
                        </li>
                    </ul>
                </div>
                {/* 分类列表结束 */}
            </div>
        )
    }
}
